<template>
<el-container class="app">
  <el-aside width="auto">
    <!-- <router-link to="/app" class="logo"></router-link> -->
    <p class="logo">oppo</p>
      <el-menu
      class="mymenu"
      :default-active="defaultActive"
      router
      unique-opened
      :collapse="$store.state.collapse"
      >
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-monitor"></i><span>控制面板</span></template>
          <el-menu-item index="/app/home">仪表盘</el-menu-item>
          </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-user"></i><span>用户管理</span></template>
          <el-menu-item index="/app/admin">用户管理</el-menu-item>
        </el-submenu>
        <!-- <el-submenu index="3">
          <template slot="title"><i class="el-icon-magic-stick"></i><span>角色管理</span></template>
          <el-menu-item index="/app/role">选项1</el-menu-item>
          <el-menu-item index="">选项2</el-menu-item>
        </el-submenu> -->
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-goods"></i><span>产品管理</span></template>
          <el-menu-item index="/app/product">产品列表</el-menu-item>
        </el-submenu>
        <el-submenu index="4">
          <template slot="title"><i class="el-icon-price-tag"></i><span>仓库管理</span></template>
          <el-menu-item index="/app/productcate">分类列表</el-menu-item>
          <!-- <el-menu-item index="/app/product">产品列表</el-menu-item> -->
        </el-submenu>
      </el-menu>
  </el-aside>
  <el-container>
    <el-header>
      <el-button size="small" @click="$store.commit('ToggleMenu')">三</el-button>
      <div class="navs">
        <router-link to="" class="home"><i class="el-icon-house"></i></router-link>
        <el-badge :value="5" class="notice">
          <i class="el-icon-bell"></i>
        </el-badge>

        <el-dropdown trigger="click" @command="delCommand">
          <span class="myavatar"> 
           <el-avatar :size="32" :src="info.avatar || require('@/assets/img/nophoto.png')"></el-avatar>
             {{info.nickname || info.username}}
            <!-- <el-avatar :size="32"></el-avatar> -->     
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item icon="el-icon-setting">个人设置</el-dropdown-item>
            <el-dropdown-item icon="el-icon-lock">修改密码</el-dropdown-item>
            <el-dropdown-item icon="el-icon-refresh">在线升级</el-dropdown-item>
            <el-dropdown-item command="/logout" icon="el-icon-switch-button">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-header>

    <el-main>
      <router-view>

      </router-view>
    </el-main>
  </el-container>
</el-container>
</template>
<script>
export default {
  data () {
    return {
      defaultActive: location.hash.slice(1)
    }
  },
  watch: {
    $route (to) {
      this.defaultActive = location.hash.slice(1)
    }
  },
  methods: {
    delCommand (command) {
      if (command === '/logout') {
        this.$confirm('您确定要退出登录吗', '提示').then(() => {
          localStorage.removeItem('Oppo-Token')
          location.reload()
        }).catch(_ => {})
      }
    }
  },
  computed :{
    info () {
      return this.$store.state.admin.info
    }
  },
  created () {
    this.$store.dispatch('admin/getInfo')
  }
}
</script>

<style lang="less">
 .mymenu{
    border-right: none;
    background-color: transparent;
    .el-menu{
      background-color: #a6e3e9;
    }
    &:not(.el-menu--collapse){
      width: 200px;
    }
    .el-submenu__title{
      color: white;
    }
    .el-submenu__title,
    .el-menu-item{
      &:hover{
        background-color:#3f72af;
      }
    }
    .el-menu-item.is-active{
      background-color: white;
      color: black;
    }
    [class*="el-icon-"]{
      color: white;
    }
  }

</style>

<style lang="less" scopend>
.app{
  height: 100vh;
  .el-button--small{
    padding: 6.5px 12px;
    font-size: 16px;
  }
  .mymenu{
    border-right:none;
    &:not(.el-menu--collapse){
      width: 200px;
    }
  }
  .el-aside{
    background-color: #112d4e;
    color: rgba(255,255,255,.6);
    box-shadow:4px 0 6px rgba(0,0,0,.15);
    z-index: 10;
    .logo{
      display: block;
      line-height: 54px;
      text-align: center;
      color: white;
      font-size: 30px;
      // background:url(../assets/img/logo.png) no-repeat 50% ;
      // background-size: 70px 120px;
    }
  }
  .el-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);

  }
  .navs{
    display: flex;
    align-items: center;
    .home{
      margin-right:30px;
    }
    .notice{
      margin-right: 30px;
    }
    .myavatar{
      display: flex;
      align-items: center;
      cursor: pointer;
      .el-avatar{
        margin-right: 10px;
      }
    }
    [class*="el-icon-"]{
      font-size: 18px;
    }
  }
}
</style>
